<ul class="space-y-1">
  <li>
    <a
      href="#"
      class="group flex items-center justify-between rounded-lg bg-gray-100 px-4 py-2 text-gray-700 dark:bg-gray-800 dark:text-gray-200"
    >
      <span class="text-sm font-medium"> General </span>
    </a>
  </li>

  <li>
    <a
      href="#"
      class="group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
    >
      <span class="text-sm font-medium"> Teams </span>

      <span
        class="shrink-0 rounded-full bg-gray-100 px-3 py-0.5 text-xs text-gray-600 group-hover:bg-gray-200 group-hover:text-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:group-hover:bg-gray-700 dark:group-hover:text-gray-300"
      >
        5
      </span>
    </a>
  </li>

  <li>
    <a
      href="#"
      class="group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
    >
      <span class="text-sm font-medium"> Billing </span>
    </a>
  </li>

  <li>
    <a
      href="#"
      class="group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
    >
      <span class="text-sm font-medium"> Invoices </span>

      <span
        class="shrink-0 rounded-full bg-gray-100 px-3 py-0.5 text-xs text-gray-600 group-hover:bg-gray-200 group-hover:text-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:group-hover:bg-gray-700 dark:group-hover:text-gray-300"
      >
        3
      </span>
    </a>
  </li>

  <li>
    <a
      href="#"
      class="group flex items-center justify-between rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
    >
      <span class="text-sm font-medium"> Account </span>
    </a>
  </li>
</ul>
